<template>
    <view class="azm-aidata-index flex flex-direction h100">
        <navBar ref="navBar" mClass="bg-blue" :options="navigationBarOptions" mode="slot-custom"
                @navBarLoad="handleNavBarLoad">
            <view slot="custom">
                <scroll-view scroll-x class="nav bg-blue azm-ai-nav"
                             scroll-with-animation
                             :scroll-left="scrollLeft">
                    <view class="cu-item" :class="index === TabCur?'active':''" @tap="handleTapSelect"
                          v-for="(item,index) in tabs" :key="index" :data-id="index">{{item}}
                    </view>
                </scroll-view>
            </view>
        </navBar>
        <view class="flex-sub overflow-hidden">
            <AiDataList ref="TabRefs" v-if="TabCur === 0" :bottom="bottom" :top="navBarTop"></AiDataList>
            <Leaderboard ref="TabRefs" v-else :bottom="bottom" :top="navBarTop"></Leaderboard>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';

    import AiDataList from '../components/ai-data-list';
    import Leaderboard from '../components/leaderboard';

    export default {
        components: {AiDataList, Leaderboard},
        computed: {
            ...mapState({
                userInfo: state => state.System.userInfo
            })
        },
        data () {
            return {
                navBarTop: 0,
                scrollLeft: 0,
                navigationBarOptions: {
                    title: '',
                    isBack: false,
                    backgroundColor: "#0075FF",
                    color: "#fff",
                    navigationBarTextStyle: "white"
                },

                info: {
                    audit: '',          // 认证状态，1为已认证，非1为未认证
                    company_name: '',   // 公司名称
                    logo: '',           // logo
                },
                dataList: [],
                popups: {
                    show: false,
                    x: 300,
                    y: 229,
                    list: [
                        {title: "查看"},
                        {title: "编辑"},
                        {title: "移除"},
                        {title: "修改权限"},
                        {title: "删除"},
                    ]
                },
                tabs: [
                    "AI报表",
                    "排行榜"
                ],
                TabCur: 0
            }
        },
        mounted () {
            this.loadData();
        },
        props: {
            bottom: {
                type: Number,
                default: 50
            }
        },
        methods: {
            handleRefresh () {
                this.$refs.TabRefs && this.$refs.TabRefs.handleRefresh()
            },
            handleTapSelect (e) {
                this.TabCur = Number(e.currentTarget.dataset.id);
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
            },
            async loadData () {

            },
            handleNavBarTap (e) {
                console.log(e);
            },
        }
    }
</script>

<style scoped lang="scss">
    .azm-aidata-index {
        .azm-ai-nav {
            height: 45*2upx;
            padding-left: 5*2upx;

            .cu-item {
                font-size: 15*2upx;
                opacity: 0.6;
                font-weight: 500;
                transition: font-size 0.2s ease-in-out;

                &.active {
                    opacity: 1;
                    font-weight: bold;
                    font-size: 19*2upx;
                }
            }
        }
    }
</style>
